<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
        }

        canvas {
            float: left;
        }

        #btn {
            position: absolute;
            top: 10px;
            left: 10px;
            display: block;
            width: 200px;
            height: 200px;
            background: #44cab8;
            border-radius: 50%;
            line-height: 200px;
            text-align: center;
            color: #fff;
            cursor: pointer;
            transition: 0.5s ease;
            font-size: 30px;
        }

        .a1 {
            transform: scale(0, 0);
        }

        #c1 {
            display: none;
        }
    </style>
</head>

<body>
    <div id="btn">准备好了！</div>
    <canvas id="c1"></canvas>
    <canvas id="c2"></canvas>

    <script>
        var c1 = document.querySelector('#c1');
        var c2 = document.querySelector('#c2');
        var ctx1 = c1.getContext('2d');
        var ctx2 = c2.getContext('2d');

        c1.width = document.documentElement.offsetWidth;
        c1.height = document.documentElement.offsetHeight;
        c2.width = document.documentElement.offsetWidth;
        c2.height = document.documentElement.offsetHeight;

        var newArr = [];
        var cols = 200;
        var rows = 200;
        var cs, rs;
        var img, imgData;

        var index = 0;

        var state = 1; //开启

        var ttt = [0,"做个小练习","美丽的妹妹","遇见你很幸运","早点休息","晚安啦"];
        var timer;
        document.querySelector("#btn").onclick = function () {
            this.className = "a1";
            state = 1;

            timer = setInterval(function () {
                ctx2.beginPath();
                imgData = [];
                newArr = [];

                ctx2.clearRect(0, 0, c2.width, c2.height);
                index++;
                if (ttt[index]) {
                    dd(ttt[index]);
                } else {
                    dd("没啦就这些啦");
                    clearInterval(timer);
                }
            }, 2500)

        }



        function dd(text) {

            cancelAnimationFrame(an);
            ctx1.fillStyle = "#fff";
            ctx1.fillRect(0, 0, c1.width, c1.height);

            ctx1.fillStyle = "#000";
            ctx1.font = "110px Arial";
            ctx1.fillText(text || "Hello World", 100, 200);

            // ctx1.drawImage(img, 0, 0, img.width, img.height);
            imgData = ctx1.getImageData(0, 0, c1.width, c1.height);
            cs = parseInt(c1.width / cols);
            rs = parseInt(c1.height / rows);
            create();
        }



        function rd() {
            return Math.floor(Math.random() * 50 + 30);
        }


        function create() {
            state = 1;
            for (var i = 1; i < cols; i++) {
                for (var j = 1; j < rows; j++) {
                    var pos = [(i * cs - 1) + (j * rs - 1) * c1.width] * 4;
                    if (imgData.data[pos] != 255) {
                        var r = Math.random() * 3;
                        newArr.push({
                            x: i * cs,
                            y: j * rs,
                            t: 0,
                            top: 200,
                            left: 200,
                            width: 2,
                            height: 2,
                            d: rd(),
                            color: "rgba(" + imgData.data[pos] + "," + imgData.data[pos + 1] + "," + imgData.data[
                                pos + 2] + ",1)",
                            show: function () {
                                this.t++;
                                var _this = this;
                                var x = Linear(_this.t, _this.left, _this.x - _this.left, _this.d);
                                var y = Linear(_this.t, _this.top, _this.y - _this.top, _this.d);
                                if (this.t > this.d) {
                                    x = this.x, y = this.y;
                                }
                                ctx2.fillStyle = this.color;
                                ctx2.fillRect(x, y, this.width, this.height);
                                // ctx2.beginPath();

                                // ctx2.arc(x, y, _this.width / 2, 0, 2 * Math.PI);
                                // ctx2.fill();
                            }
                        })

                    }
                }
            }

            show()
        }

        // 0 0 500 500
        function Linear(t, b, c, d) {
            return c * t / d + b;
        }

        var an;

        function show() {
            if (state == 0) {
                return false;
            }
            c2.width = c2.width;
            newArr.forEach(function (v, i) {
                v.show();
            })
            an = requestAnimationFrame(show);
        }
        an = requestAnimationFrame(show);
    </script>
</body>

</html>